import _ from 'lodash';
import React, { useEffect, forwardRef } from 'react';

import { useTRState } from '#/utils/trHooks.jsx';

import Main from './Main';
import styles from './index.less';

export default forwardRef(({ queryForm, menuCode }, ref) => {
  const [state, setState] = useTRState({
    formValue: {},
  });
  const { formValue } = state;

  useEffect(() => {
    const { startDate, endDate, pointNum, type, tag, provinceId, stationIds, regions } = queryForm;
    setState({
      formValue: {
        provinceId,
        unit: stationIds,
        date: [startDate, endDate],
        point: pointNum,
        unitType: type,
        tag,
        provinceName: regions,
      },
    });
  }, [queryForm]);

  return (
    <div className={styles.main}>
      <Main formValue={formValue} menuCode={menuCode} ref={ref} />
    </div>
  );
});
